<template>
    <div class='content'>
        <h4>商品搜索</h4>
       <div class="mui-input-row mui-search">
            <input type="search" class="mui-input-clear" placeholder="请输入商品名称">
        </div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                华为
                <button type="button" class="mui-btn">
                    <span class="mui-icon mui-icon mui-icon-trash"></span>
                </button>
            </li>
            <li class="mui-table-view-cell">
                苹果
                <button type="button" class="mui-btn">
                    <span class="mui-icon mui-icon mui-icon-trash"></span>
                </button>
            </li>
            <li class="mui-table-view-cell">
                小米
                <button type="button" class="mui-btn">
                    <span class="mui-icon mui-icon mui-icon-trash"></span>
                </button>
            </li>
            <li class="mui-table-view-cell last">
                清除所有搜索记录
            </li>
        </ul>
    </div>
</template>
<style lang="scss" scoped>
    h4{
        text-align: center;
    }
    .content{
        padding: 0 10px;
    }
    .mui-input-row{
        margin-top: 15px;
    }
    button{
        border: none;
    }
    .mui-table-view{
        font-size: 14px;
    }
    .mui-icon {
        font-size: 20px;
    }
    .last{
        text-align: center;
    }
</style>